<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Gantt Chart</title>

    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />


 
	<script src="jquery1x.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.ganttchart/jquery.ganttchart.css" />
    <script type="text/javascript" src="jquery.ganttchart/jquery.ganttchart.js"></script>

</head>

<body>

                
    <div id="ganttchart"></div>



                





<script type="text/javascript">


$(function(){

    $("#ganttchart").ganttchart({
        mode: "week",
        //head_width: 600,
        //height: 700,
        columns : [
            { data: "Index", name: "序号", width: 30, hidden: false },
            { data: "Name", name: "计划名称", width:350, formatter: function(index, data, rowData){
                return  "<a href='#'>" + data + " </a>";
            }},
            { data: "StartTime", name: "开始时间", width:90 },
            { data: "EndTime", name: "结束时间", width:90 },
            { data: "UseTime", name: "消耗时间", width:50 }
        ],
        data: [
            { Name: "计划<button> Button </button>asdf名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"#FFCCCC" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"#CCFFCC" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 6, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 10, 20), EndTime: new Date(2021, 2,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 10, 2), EndTime: new Date(2019, 11,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2019, 11, 20), EndTime: new Date(2020, 1,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 2, 20), EndTime: new Date(2020, 6,1), UseTime: "4天", Color:"" },
            { Name: "计划名称", StartTime: new Date(2020, 11, 1), EndTime: new Date(), UseTime: "4天", Color:"" }
        ]
    });

});
</script>

</body>

</html>